<script>
  let username = ''
  let password = ''
  let error = ''
  let success = ''

  async function handleRegister() {
    const res = await fetch('/api/account/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }), });
    const data = await res.json();
    if (data.status) {
      success = data.message
      error = ''
    } else {
      error = data.message
      success = ''
    }
    
  }
</script>

<div class="min-h-[calc(100vh-64px)] flex items-center justify-center bg-gray-50 px-4" >
  <div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
    <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6"> 注册账号 </h1>
    {#if error} <p class="text-red-500 text-sm mb-4 text-center">{error}</p> {/if}
    {#if success} <p class="text-green-500 text-sm mb-4 text-center">{success}</p> {/if}
    <div class="space-y-4">
      <input class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none" placeholder="用户名" bind:value={username} />
      <input class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none" type="password" placeholder="密码" bind:value={password} />
      <button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 rounded-xl transition" on:click={handleRegister} > 注册 </button>
    </div>
    <p class="text-sm text-gray-500 text-center mt-6"> 已有账号？ <a href="/account/login" class="text-green-600 hover:underline" >立即登录</a > </p>
  </div>
</div>
